<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            line-height: 200px;
            font-size: 30px;
            letter-spacing: 10px;
            text-align: center;
            user-select: none;
        }

        #canvas {
            border: 1px solid;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">特等奖</div>
    <canvas width="400" height="200" id="canvas">
        请升级你的服务器
    </canvas>
    <script>
        var canvas = document.querySelector('#canvas')
        var context = canvas.getContext('2d');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle='#666';
        // context.globalAlpha=0.7;
        context.fill();
        
        context.globalCompositeOperation = 'destination-out'
        canvas.onmousedown = function () {
            canvas.onmousemove = function (event) {
                context.beginPath();
                context.arc(event.offsetX, event.offsetY, 30, 0, 7);
                context.fill();
                canvas.onmouseup = function () {
                    canvas.onmousemove = null;
                }
            }

        }









    </script>
</body>

</html>